<template>
    <div class="comp-navbar" v-loading.fullscreen="loading">
        <div class="comp-navbar__top">
            <div class="logo"></div>
            <div class="navs" @mousewheel="onWheel">
                <div class="nav" v-for="(nav, index) in topbar.navs" :key="index" :class="{ selected: index === topbar.index, hidden: nav.name === 'user' }" @click="onClick(nav)">{{ nav.title }}</div>
            </div>
            <div class="tools">
                <div class="tool" v-if="profile">
                    <span>{{ profile.name || profile.number }}</span>
                    <span class="el-icon-caret-bottom"></span>
                    <el-dropdown class="dropdown">
                        <div class="dropdown-text"></div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-user" @click.native="getProfile()">个人信息</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-date" @click.native="getTasks()">系统任务</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-setting" @click.native="setPassword()">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-switch-button" @click.native="logout()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="comp-navbar__left">
            <div class="navs">
                <div class="nav" v-for="(nav, index) in leftbar.navs" :key="index" :class="{ selected: index === leftbar.index }" @click="onClick(nav)">
                    <span class="title">{{ nav.title }}</span>
                    <span class="text" v-if="nav.text">{{ nav.text }}</span>
                </div>
            </div>
            <div class="supports">
                <div class="supporter">
                    <span class="text">技术支持</span>
                    <a class="link" target="_blank">桂林顶鑫</a>
                </div>
                <div class="copyright">© {{ year }}</div>
            </div>
        </div>
        <comp-dialog title="修改登录密码" ref="passwordSetForm">
            <el-form size="small" label-width="112px" style="margin-right: 20px" @submit.native.prevent v-if="passwordSetForm">
                <el-form-item label="旧密码：" required>
                    <el-input ref="passwordSetFormPassword" v-model="passwordSetForm.password" type="password" style="width: 320px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setPassword('validate')"></el-input>
                </el-form-item>
                <el-form-item label="新密码：" required>
                    <el-input v-model="passwordSetForm.newpassword" type="password" style="width: 320px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setPassword('validate')"></el-input>
                </el-form-item>
                <el-form-item label="重复新密码：" required>
                    <el-input v-model="passwordSetForm.renewpassword" type="password" style="width: 320px" placeholder="请输入" :maxlength="20" :readonly="loading" @change="setPassword('validate')"></el-input>
                    <div style="padding: 5px 0; width: 320px; color: #aaa; line-height: 1.5">
                        <div>新密码格式为8-20位字符。</div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-check" @click="setPassword('submit')">修改</el-button>
                    <el-button type="plain" icon="el-icon-close" @click="setPassword('end')">放弃</el-button>
                </el-form-item>
            </el-form>
        </comp-dialog>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "comp-navbar",
        mixins: [mixin],
        data: () => ({
            loading: false,
            topbar: {
                navs: [],
                index: -1,
            },
            leftbar: {
                navs: [],
                index: -1,
            },
            passwordSetForm: {
                password: "",
                newpassword: "",
                renewpassword: "",
            },
            year: new Date().getFullYear(),
        }),
        methods: {
            onClick(nav) {
                if (this.loading) return;
                this.$router.replace(nav.name);
            },
            onWheel(event) {
                let node = event.currentTarget;
                let direction = event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : 0;
                if (direction !== 0) node.scrollTo(node.scrollLeft + node.scrollWidth / node.children.length * direction, 0);
            },
            getProfile() {
                if (this.loading) return;
                this.$router.replace("/user/profile");
            },
            getTasks() {
                if (this.loading) return;
                this.$router.replace("/user/tasks");
            },
            setPassword(action, data) {
                if (this.loading) return;
                let form = this.passwordSetForm;
                if (!action || action === "start") {
                    form.password = form.newpassword = form.renewpassword = "";
                    this.setPassword("validate");
                    this.$refs.passwordSetForm.init();
                    this.$nextTick(() => this.$refs.passwordSetFormPassword.focus());
                } else if (action === "validate") {
                    let error = "";
                    form.password = string(form.password);
                    error = error || (form.password ? "" : "请输入旧密码！");
                    form.newpassword = string(form.newpassword);
                    error = error || (form.newpassword ? "" : "请输入新密码！");
                    error = error || (form.newpassword.length >= 8 ? "" : "新密码格式不正确！");
                    form.renewpassword = string(form.renewpassword);
                    error = error || (form.renewpassword ? "" : "请重复输入新密码！");
                    error = error || (form.newpassword === form.renewpassword ? "" : "两次输入新密码不一致！");
                    if (data) this.plugins.modal.toast(error, "error");
                    return !error;
                } else if (action === "submit") {
                    if (!this.setPassword("validate", true)) return;
                    this.loading = true;
                    this.plugins.user.setUserPassword(form).then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("修改成功！", "success");
                            this.setPassword("end");
                        } else {
                            this.plugins.modal.alert("修改失败", res.code + "：" + res.msg, "error");
                        }
                    });
                } else if (action === "end") {
                    form.password = form.newpassword = form.renewpassword = "";
                    this.$refs.passwordSetForm.close();
                }
            },
            login() {
                if (this.loading) return;
                this.$router.replace({ name: "login", query: { to: this.$route.fullPath } });
            },
            logout() {
                if (this.loading) return;
                this.plugins.modal.alert("退出登录确认", "确定要退出登录吗？", "warning", ["确定退出", "再想想"]).then((ok) => {
                    if (!ok) return;
                    this.loading = true;
                    this.plugins.user.logout().then((res) => {
                        this.loading = false;
                        if (res.code === 0) {
                            this.plugins.modal.toast("退出登录成功！", "success");
                            this.login();
                        } else {
                            this.login();
                        }
                    });
                });
            },
            init() {
                if (this.loading) return;
                let topbar = this.topbar;
                let leftbar = this.leftbar;
                let names = this.$root.$options.childs.slice();
                let routes = this.$router.options.routes.filter(({ name, path }) => name && path);
                let select = (name) => {
                    let route = routes.find((route) => route.name === name);
                    return route ? route.name === this.$route.name || route.meta.childs.slice().some(select) : false;
                };
                let access = (name) => this.access(name);
                topbar.navs.splice(0);
                leftbar.navs.splice(0);
                topbar.index = leftbar.index = -1;

                names.forEach((name) => {
                    let route = routes.find((route) => route.name === name && access(name));
                    let index = route ? topbar.navs.push({ name, title: route.meta.title }) - 1 : -1;
                    if (index > -1 && select(name)) {
                        topbar.index = index;
                       
                        leftbar.navs.push({ name, title: route.meta.title, text: "" });
                       console.log(leftbar);
                        route.meta.childs.slice().forEach((name) => {
                            let route = routes.find((route) => route.name === name && access(name));
                            let index = route ? leftbar.navs.push({ name, title: route.meta.title, text: "" }) - 1 : -1;
                            if (index > -1 && select(name)) leftbar.index = index;
                        });
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .comp-navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .comp-navbar__top {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: url(../assets/img01.png) no-repeat center center/100% 100%;

        & > .logo {
            flex: 0 0 auto;
            margin: 15px;
            width: 150px;
            height: 30px;
            background: url(../assets/logo-2x1.png) no-repeat left center/contain;
            cursor: pointer;
        }

        & > .navs {
            flex: 1 1 0;
            margin: 0 10px;
            height: 60px;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;

            &::-webkit-scrollbar {
                display: none;
            }

            & > .nav {
                display: inline-block;
                padding: 20px;
                height: 20px;
                color: rgba(white, 0.5);
                font-size: 16px;
                line-height: 20px;
                vertical-align: top;
                user-select: none;
                cursor: pointer;

                &:hover {
                    background-color: rgba(#1677ff, 0.1);
                }

                &.selected {
                    color: white;
                }

                &.hidden {
                    display: none;
                }
            }
        }

        & > .tools {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            margin: 0 10px;

            & > .tool {
                flex: 0 0 auto;
                padding: 20px;
                height: 20px;
                color: rgba(white, 0.5);
                font-size: 16px;
                line-height: 20px;
                cursor: pointer;

                & > .dropdown {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    & > .dropdown-text {
                        height: 100%;
                    }
                }

                &:hover {
                    background-color: rgba(#1677ff, 0.1);
                }
            }
        }
    }

    .comp-navbar__left {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 180px;
        height: calc(100% - 60px);
        background-color: #f6f6f6;

        & > .navs {
            flex: 1 1 0;
            overflow-x: hidden;
            overflow-y: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            & > .nav {
                margin-bottom: 10px;
                padding: 10px 30px;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                user-select: none;
                cursor: pointer;

                & > .title {
                    flex: 0 1 auto;
                    min-height: 20px;
                    color: #333;
                    font-size: 14px;
                    line-height: 20px;
                }

                & > .text {
                    flex: 0 0 auto;
                    margin-left: 0.5em;
                    height: 20px;
                    color: #999;
                    font-size: 14px;
                    line-height: 20px;
                }

                &:hover {
                    background-color: rgba(black, 0.05);
                }

                &:first-child {
                    padding: 30px;
                    pointer-events: none;

                    & > .title {
                        color: #999;
                        font-size: 16px;
                    }

                    &:hover {
                        background-color: transparent;
                    }
                }

                &.selected {
                    border-right: solid 4px #146cff;
                    padding-right: 26px;
                    background-color: #d9e5f5;

                    & > .title {
                        color: #146cff;
                        font-weight: bold;
                    }

                    &:hover {
                        background-color: #d9e5f5;
                    }
                }
            }
        }

        & > .supports {
            flex: 0 0 auto;
            display: flex;
            flex-direction: column;
            padding: 10px;

            & > .supporter {
                flex: 0 0 auto;
                color: #999;
                font-size: 12px;
                line-height: 20px;
                text-align: center;

                & > .text {
                    margin: 0 4px;
                }

                & > .link {
                    margin: 0 4px;
                    color: inherit;
                    text-decoration: none;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            & > .copyright {
                flex: 0 0 auto;
                color: #999;
                font-size: 12px;
                line-height: 20px;
                text-align: center;
            }
        }
    }
</style>